<template>
    <div>
        <div class="search-container">
            <el-form ref="form" :model="form" label-width="80px">
                <div class="flex-row">
                    <el-form-item label="mod" prop="mod">
                        <el-select v-model="form.mod" placeholder="请选择">
                            <el-option v-for="item in modList" :key="item._id" :label="item.name" :value="item._id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="皮肤" prop="skin">
                        <el-select v-model="form.skin" placeholder="请选择">
                            <el-option v-for="item in allSkin" :key="item._id" :label="item.name" :value="item._id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="cdk状态" prop="status">
                        <el-select v-model="form.status" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="getCdkList">查询</el-button>
                        <el-button @click="resetForm">重置</el-button>
                        <el-button type="primary" @click="dialogFormVisible = true">新增CDK</el-button>
                        <el-button type="info" @click="getAllCanUse">获取本页可用CDK</el-button>
                    </el-form-item>
                </div>
            </el-form>

            <div class="table-container">
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column prop="created" label="皮肤贴图" width="120">
                        <template slot-scope="scope">
                            <img :src="domain + scope.row.linkSkin[0].src" alt height="32" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="created" label="皮肤名称" width="180">
                        <template slot-scope="scope">
                            <p>{{ scope.row.linkSkin[0].name }}</p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="created" label="日期" width="180">
                        <template slot-scope="scope">
                            <p>{{ getTime(scope.row.created) }}</p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="hasUsed" label="状态" width="180">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.hasUsed" type="danger">已使用</el-tag>
                            <el-tag v-else type="success">未使用</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="cdkStr" label="cdk码" width="180">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button size="mini" type="danger" @click="deleteItem(scope.row._id)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="flex-end">
                    <el-pagination background layout="prev, pager, next" :pageSize="pageSize" :total="total"
                        :current-page.sync="pageNum" @current-change="getCdkList">
                    </el-pagination>
                </div>
            </div>
        </div>

        <!-- 新增cdk -->
        <el-dialog title="新增cdk" :visible.sync="dialogFormVisible">
            <el-form :model="form2">
                <el-form-item label="mod" prop="mod">
                    <el-select v-model="form2.mod" placeholder="请选择">
                        <el-option v-for="item in modList" :key="item._id" :label="item.name" :value="item._id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="皮肤" prop="skin">
                    <el-select v-model="form2.skin" placeholder="请选择">
                        <el-option v-for="item in allSkin" :key="item._id" :label="item.name" :value="item._id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="数量" prop="num">
                    <el-input-number v-model="form2.num" :min="1" :max="100" label="创建cdk条数"></el-input-number>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addItem">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 可用cdk -->
        <el-dialog :title="`可用CDK(共${canUseCdkList.length}条)`" :visible.sync="dialogVisible" width="30%">
            <p v-for="(item, index) in canUseCdkList" :key="index" class="cdk-item">{{ item }}</p>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import moment from "moment";
export default {
    data() {
        return {
            dialogVisible: false,
            dialogFormVisible: false,
            options: [
                {
                    label: '全部',
                    value: ''
                },
                {
                    label: '未使用',
                    value: '1'
                },
                {
                    label: '已使用',
                    value: '2'
                },
            ],
            modList: [],
            allSkin: [],
            form: {
                mod: '',
                skin: '',
                status: '',
            },
            form2: {
                mod: '',
                skin: '',
                num: 1
            },
            tableData: [],
            total: 0,
            pageSize: 10,
            pageNum: 0,
            canUseCdkList: []
        }
    },
    activated() {
        this.getModList()
    },
    methods: {
        getAllCanUse() {
            this.canUseCdkList = this.tableData.filter(val => {
                return !val.hasUsed
            }).map(val => {
                return val.cdkStr
            })
            if (!this.canUseCdkList.length) {
                this.$message.error('无可用cdk!')
            }
            this.dialogVisible = true
        },
        async addItem() {
            let res = await this.axios.post('/cdk/add', {
                id: this.form2.skin,
                mid: this.form2.mod,
                num: this.form2.num
            })
            if (res.data.code == 0) {
                this.dialogFormVisible = false
                this.resetForm()
                this.getCdkList()
                this.$message({
                    type: "success",
                    message: `创建${this.form2.num}条cdk成功!`,
                });
            } else {
                this.$message.error("失败");
            }
        },
        deleteItem(id) {
            this.$confirm("是否删除该cdk?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(async () => {
                    let res = await this.axios.post("/cdk/delete", {
                        id,
                    });
                    if (res.data.code == 0) {
                        this.$message({
                            type: "success",
                            message: "删除成功!",
                        });
                        this.getCdkList();
                    } else {
                        this.$message.error("删除失败");
                    }
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        getTime(time) {
            return moment(time).format("YYYY-MM-DD");
        },
        async getCdkList() {
            let res = await this.axios("/cdk/list", {
                params: {
                    pageSize: this.pageSize,
                    pageNum: this.pageNum - 1,
                    mid: this.form.mod,
                    skinId: this.form.skin,
                    status: this.form.status
                },
            });
            this.tableData = res.data.data;
            this.total = res.data.total;
        },
        async getModList() {
            let res = await this.axios("/mods", {
                params: {
                    version: this.$store.state.version,
                },
            });
            this.modList = res.data;
            this.form.mod = res.data[0]._id
            this.form2.mod = res.data[0]._id
            this.getAllSkin()
            this.getCdkList()
        },
        async getAllSkin() {
            let res = await this.axios("/modskin/allSkin", {
                params: {
                    mid: this.form.mod,
                },
            });
            this.allSkin = res.data;
        },
        resetForm() {
            this.$refs.form.resetFields();
            this.form.mod = this.modList[0]._id
        }
    }
}
</script>
<style>
.flex-row {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 16px 16px 0 16px;
}

.table-container {
    padding: 0 16px 16px 16px;
}

.flex-end {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-top: 16px;
}
</style>